<!DOCTYPE html>
<html style="font-size: 50px">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
    <title>美策平台</title>
    <link rel="icon" type="image/png" href="/img/icon.png">

    <link rel="stylesheet" type="text/css" href="ui/ui.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body class="H5body">
<div class="BodyContent">

    <div class="Panel">
        <p class="label_title">UI各种控件例子</p>
        <ul class="PanelUl">
            <li class="li">
                <p class="li_title">这是表单的说明文字</p>
                <div class="inputDiv">
                    <input type="text" value="" class="inputtext"/>
                </div>
            </li>
            <li class="li">
                <p class="li_title">下拉框</p>
                <div class="inputDiv">
                    <select class="inputselect">
                        <option value="0">请选择行业类型</option>
                        <option value="2">服装</option>
                        <option value="18">染整</option>
                    </select>
                </div>
            </li>
            <li class="li">
                <p class="li_title">图片上传</p>
                <div class="inputDiv">
                    <PicFileDiv id="testpic" title="请选择上传的图片"></PicFileDiv>
                </div>
            </li>
            <li class="li">
                <p class="li_title">剪辑图片上传</p>
                <div class="inputDiv">
                    <PhotoClip id="testpic2" title="选择图片"></PhotoClip>
                </div>
            </li>

        </ul>
    </div>







    <div class="Panel">
        <p class="label_title">常用列表示例</p>
        <ul class="PanelUl">
            <li class="li">
                 <div class="listcon clearfix">
                     <div class="leftcon">
                         <img class="touxiang" src="http://www.fuzhuangchangongxiao.cn/uploads/20191203/842a2935437f8dd3a1ff11752d90de63small.jpg"/>
                         <p class="context">用户名或者公司名</p>
                     </div>

                 </div>
            </li>

            <li class="li">
                 <div class="listcon clearfix">
                     <div class="leftcon">
                         <p class="title">左边一般是标题</p>
                     </div>
                     <div class="reightcon">
                         <p class="context color_black2">
                         右边是内容右边是内容右边是内容
                         </p>
                     </div>
                 </div>
            </li>
            <li class="li">
                 <div class="listcon clearfix">
                     <div class="leftcon">
                         <p class="title">左边一般是标题</p>
                     </div>
                     <div class="reightcon">
                         <p class="context color_black2">
                         右边是内容
                         </p>
                     </div>
                 </div>
            </li>
            <li class="li">
                 <div class="listcon clearfix">
                     <div class="leftcon">
                         <p class="title">左边一般是标题</p>
                     </div>
                     <div class="reightcon">
                         <p class="context color_black2">
                         右边是内容
                         </p>
                     </div>
                 </div>
            </li>
            <li class="li">
                 <p class="listcon li_tilte">
                      以下是按钮示例
                 </p>
            </li>

            <li class="li">
                 <div class="listcon clearfix">
                     <div class="leftcon">
                         <p class="title">一般按钮</p>
                     </div>
                     <div class="reightcon">
                         <a class="ui_btn">一般按钮</a>
                     </div>
                 </div>
            </li>
            <li class="li">
                 <div class="listcon clearfix">
                     <div class="leftcon">
                         <p class="title">大一点按钮</p>
                     </div>
                     <div class="reightcon">
                         <a class="ui_btn ui_btnbig">大一点按钮</a>
                     </div>
                 </div>
            </li>
            <li class="li">
                 <div class="listcon clearfix">
                     <div class="leftcon">
                         <p class="title">超大按钮</p>
                     </div>
                     <div class="reightcon">
                         <a class="ui_btn ui_btnbig2">超大按钮</a>
                     </div>
                 </div>
            </li>
        </ul>
    </div>

<div style="width: 1px;height: 3rem;"></div>
</div>
</body>
<script type="text/javascript" src="/h5/js/all.js?c=1"></script>
<script>
    /// var bottom=new MC.UI.bottomBtnDiv(1);
    var H5 = new MC.H5App();
    H5.createBottomBtnDiv(1);
    H5.createUpPic();
    H5.TitleBar.create('标题', '副按钮');
    H5.TitleBar.fubiaoti = function () {
        MC.msg.alert('副标题');
    }
</script>
</html>